<template>
  <div
    class="div"
    style="max-height: 100%"
  >
    <!-- 顶部内容 -->
    <div
      class="div__top top"
      :style="topStyleComputed"
      :class="topClass"
    >
      <div
        class="top__title"
        :class="titleClass"
        :style="titleStyle"
      >
        <!-- 标题插槽 -->
        <slot name="title">
          {{ title || "TITLE" }}
        </slot>
      </div>
      <!-- 副标题 -->
      <div
        class="top__subTitle"
        :class="subTitleClass"
        :style="subTitleStyle"
      >
        <slot name="subTitle">
          {{ subTitle || "SUBTITLE" }}
        </slot>
      </div>
    </div>
    <!-- 内部元素 -->
    <div
      class="div__content content"
      :style="contentStyle"
      :class="contentClass"
    >
      <slot>
        {{ content || "CONTENT" }}
      </slot>
    </div>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps([
  "color",
  "title",
  "subTitle",
  "content",
  "topStyle",
  "topClass",
  "titleClass",
  "titleStyle",
  "subTitleClass",
  "subTitleStyle",
  "contentStyle",
  "contentClass",
]);

const topStyleComputed = computed(() => {
  return Object.assign(
    {
      "border-left": `4px solid ${props.color || "var(--color-primary)"}`,
    },
    props.topStyle || {}
  );
});
</script>

<style lang="scss" scoped>
@mixin block($block) {
  .#{$block} {
    @content;
  }
}

@mixin element($element) {
  &__#{$element} {
    @content;
  }
}

@mixin modifier($modifier) {
  &--#{$modifier} {
    @content;
  }
}

@include block(div) {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  @include element(top) {
    width: 100%;
    display: flex;

    @apply pl-2;
  }
  @include element(content) {
    flex: 1;
    @apply pl-4;
  }
}

@include block(top) {
  display: flex;
  align-items: center;
  position: relative;
  // justify-content: space-between;
  @include element(title) {
    @apply text-xl;
  }
  @include element(subTitle) {
    right: 8px;
    position: absolute;
    opacity: 0.6;
    @apply text-base;
  }
}
</style>
